<script setup lang="ts">
import { getAuth, addZero } from "@/utils/util";

defineProps(["showIndex", "index", "list"]);
</script>

<template>
  <ul>
    <li class="px-2.5" v-for="(item, i) in list" :key="'new' + i">
      <router-link
        :to="{ name: 'song', params: { id: item.id } }"
        class="flex h-[120px] py-1.5 border-b-2 border-gray-100"
      >
        <div
          v-if="showIndex || index > 0"
          class="flex-center p-2.5 -ml-2.5 text-base text-slate-400"
          :class="{ 'text-p-color': i < index }"
        >
          {{ addZero(i + 1 + "") }}
        </div>
        <div class="flex-1 flex overflow-hidden">
          <div class="flex-1 overflow-hidden">
            <div class="text-lg line-clamp-1">{{ item.name }}</div>
            <div class="text-slate-400 text-xs line-clamp-1">
              <i class="sprt inline-block w-3 h-2 mr-1" v-if="item.sq"></i>
              {{ getAuth(item.ar) }} - {{ item.alName || item.al.name }}
            </div>
          </div>
          <div class="flex-center py-2.5">
            <span class="sprt inline-block w-5.5 h-5.5 bg-[-48px_0px]"></span>
          </div>
        </div>
      </router-link>
    </li>
  </ul>
</template>

<style lang="scss" scoped></style>
